<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label=" 昵称：">
            <el-input v-model="form.userNickName" placeholder="请输入昵称" @change="loadUserList"></el-input>
          </el-form-item>
          <el-form-item label=" 真实姓名：">
            <el-input v-model="form.userRealName" placeholder="请输入真实姓名" @change="loadUserList"></el-input>
          </el-form-item>
          <el-form-item label=" 手机号：">
            <el-input v-model="form.userPhone" placeholder="请输入手机号" @change="loadUserList"></el-input>
          </el-form-item>
          <el-form-item label="状态:">
            <el-select v-model="form.userState" placeholder="请选择" clearable @change="loadUserList">
              <el-option :key="0" label="正常" :value="0"></el-option>
              <el-option :key="1" label="禁言" :value="1"></el-option>
              <el-option :key="2" label="不可用" :value="2"></el-option>
              <el-option :key="3" label="已删除" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <el-table :data="userInfoDto" style="width: 100%">
          <el-table-column prop="userId" label="用户编号" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="userNickName" label="昵称" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="userRealName" label="真实姓名" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="userPhone" label="手机号" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="userState" label="用户状态" width="190">
            <template slot-scope="scope">
              {{ scope.row.userState==0?"正常":scope.row.userState==1?"禁言":scope.row.userState==2?"不可用":scope.row.userState==3?"已删除":"异常状态"}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center" label-align="center">
            <template slot-scope="scope">
              <el-button  @click="disabledUser(scope.row)" type="text" v-if="scope.row.userState==0">禁言</el-button>
              <el-button  @click="abledUser(scope.row)" type="text" v-if="scope.row.userState==1">解禁</el-button>
              <el-button  @click="openUserVipWindow(scope.row)" type="text" >查看用户vip信息</el-button>
              <el-button type="primary" @click="addUserVipDate(scope.row)">赠送七天会员</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--分页-->
    <el-pagination @size-change=" handleSizeChange" @current-change="handleCurrentChange" :current-page="form.pageNum"
      :page-sizes="[3,4,5]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <el-dialog title="用户vip信息" :visible.sync="userVipWindow">
          <el-form :model="vipInfo">
            <el-form-item label="用户编号:">
              <span id="st" v-text="vipInfo.userId"></span>
            </el-form-item>
            <el-form-item label="vip等级编号:" v-if="false">
              <span id="st" v-text="vipInfo.vipLevelId"></span>
            </el-form-item>
            <el-form-item label="vip等级名称:" >
              <span id="st" v-text="vipInfo.vipLevelName"></span>
            </el-form-item>
            <el-form-item label="vip开始时间:">
              <span id="st" v-text="vipInfo.vipStartTime"></span>
            </el-form-item>
            <el-form-item label="vip结束时间:">
              <span id="st" v-text="vipInfo.vipEndTime"></span>
            </el-form-item>
            <el-form-item label="免费洗车次数:">
              <span id="st" v-text="vipInfo.freeNum"></span>
            </el-form-item>
            <el-form-item label="会员等级积分:">
              <span id="st" v-text="vipInfo.vipScore"></span>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="userVipWindow = false">关闭</el-button>
          </div>
        </el-dialog>


  </div>
</template>

<script>
  export default{
    name:"useraccount",
    data(){
      return{
      form:{
        userNickName:"",
        userRealName:"",
        userPhone:"",
        userState:"",
        pageSize:3,
        pageNum:1,
      },
      total:0,
      userInfoDto:[{}],
      userVipWindow:false,
      vipInfo:{}
      }
    },methods:{
loadUserList(){
  this.$http.post("/person/userInfo/allUserList.api",this.form).then(resp=>{
    if(resp.data.code==200){
      this.userInfoDto=resp.data.data.records
      this.total=resp.data.data.total
    }else{
      this.$message({
        message: resp.data.message,
        type: 'warning'
      });
    }
  })
},
handleSizeChange(val){
  this.form.pageSize=val
  this.loadUserList()
},
handleCurrentChange(val){
  this.form.pageNum=val
  this.loadUserList()
},
disabledUser(row){
  this.$http.get("/person/userInfo/disabledUser.api",{params:{userId:row.userId}}).then(resp=>{
    if(resp.data.code=200){
      this.SuccessTip(resp.data);
      this.loadUserList()
    }else{
this.ErorrTip(resp.data);
    }
  })
},
abledUser(row){
  this.$http.get("/person/userInfo/ableUser.api",{params:{userId:row.userId}}).then(resp=>{
    if(resp.data.code=200){
      this.loadUserList()
      this.SuccessTip(resp.data);
    }else{
      this.ErrorTip(resp.data)
    }
  })
},
SuccessTip(data) { //成功
        if (data.code === 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'success'
          });
        }
      },
      ErrorTip(data) { //失败
        if (data.code !== 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'error'
          });
        }
      },
      openUserVipWindow(userDto){
        this.$http.get("/value-added/userVip/getUserVipInfo/"+userDto.userId+".c").then(resp=>{
          if(resp.data.code==200){
            this.vipInfo=resp.data.data
            this.userVipWindow=true
          }else{
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      addUserVipDate(userDto){
        console.log(userDto)
        this.$http.get("/value-added/userVip/userVipAdd7Days.api",{params:{userId:userDto.userId}}).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.loadUserList()
          }else{
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      }
    },created(){
      this.loadUserList()
    }
  }
</script>

<style>
</style>
